<!DOCTYPE html>
<html lang=ch>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="../assets/js/api.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .center {
        margin: 0px auto;
    }

    .textcenter {
        text-align: center;
    }

    .leftfloat {
        float: left;
    }

    cleanfloat > div {
        height: 260px;
    }

    .leftfloat img {
        width: 165px;
        height: 260px;
    }

    .bookinfobox {
        float: right;
    }

    .cleanfloat {
        overflow: auto;
    }
</style>
<body>
<div id="booklist" class="center textcenter">
    <div>
        <el-input v-model="key" style="width:200px" placeholder="请输入内容"></el-input>

        <el-button type="success" @click="updatedate()"  icon=" el-icon-search" circle></el-button>

        <el-button type="success" icon="el-icon-circle-plus" @click=" bookinsertdialog = true" circle style="float: right;margin-right: 200px;"></el-button>

    </div>
    <template>
        <el-table
                :data="bookData"
                style="width: 80%"
                class="center"
                :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="name"
                    label="书名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="inventory"
                    label="库存">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.isbn)" type="text" size="small">查看</el-button>
                    <el-button  @click="updatebook(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button  @click="del(scope.row.isbn)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center">
            <el-pagination
                    class="center textcenter"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10,20,30,50]"
                    :page-size="pagesize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </template>

    <el-dialog
            :title="bookinfo.name"
            :visible.sync="bookInfodialog"
            width="600px"
            :before-close="handleClose">
        <div>
            <div class="cleanfloat">

                <div class="leftfloat"><img :src="'../upload/'+(bookinfo.caver)"></div>
                <div class="leftfloat" style="margin: 50px; ">

                    <table style="margin-left: 20px; ">
                        <tr>
                            <td width="50" style="margin-left: 20px">类型:</td>
                            <td>{{bookinfo.type}}</td>
                        </tr>
                        <tr>
                            <td>isbn:</td>
                            <td>{{bookinfo.isbn}}</td>
                        </tr>

                        <tr>
                            <td>库存:</td>
                            <td>{{bookinfo.inventory}}</td>
                        </tr>
                        <tr>
                            <td>可借阅:</td>
                            <td>{{bookinfo.inventory-bookinfo.lentnum}}</td>
                        </tr>
                        <tr>
                            <td>借阅量:</td>
                            <td>{{bookinfo.borrowing}}</td>
                        </tr>
                        <tr>
                            <td>售价:</td>
                            <td>{{bookinfo.price}}</td>
                        </tr>
                    </table>
                    <el-button style="margin-left: 200px;" size="mini" round type="primary" plain @click="innerVisible=true">借阅</el-button>
                    <el-dialog
                            width="300px"
                            title="输入借阅者"
                            :visible.sync="innerVisible"
                            append-to-body>
                        <el-autocomplete
                                popper-class="my-autocomplete"
                                v-model="state"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入内容"
                                @select="handleSelect">

                            <template slot-scope="{ item }">
                                <div class="name">{{ item.value }}</div>
                                <span class="addr">{{ item.name }}</span>
                            </template>
                        </el-autocomplete>
                        <el-button type="success" icon="el-icon-check" @click="borrowing" circle></el-button>
                    </el-dialog>



                </div>
            </div>
            <div style="text-indent:2em">
                {{bookinfo.info}}
            </div>
        </div>

    </el-dialog>

    <el-dialog
            title="修改管理员信息"
            :visible.sync="bookupdatedialog"
            width="600px"
            :before-close="handleClose">
        <el-form   :rules='rules' label-width="100px" :model="bookinfo">
            <el-form-item label="书名">
                <el-input v-model="bookinfo.name"   prop></el-input>
            </el-form-item>
            <el-form-item label="isbn">
                <el-input v-model="bookinfo.isbn" :disabled="true" prop></el-input>
            </el-form-item>
            <el-form-item label="封面">
                <el-upload
                        action="../upload"
                        name="file"
                        :on-success="upload"
                        :on-error="upload">
                    <el-input  v-model="bookinfo.caver" prop  placeholder="点击选择封面"></el-input>
                </el-upload>

            </el-form-item>
            <el-form-item label="价格">
                <el-input  v-model="bookinfo.price" prop></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input  v-model="bookinfo.author" prop></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-input  v-model="bookinfo.type" prop></el-input>
            </el-form-item>
            <el-form-item label="介绍">
                <el-input  v-model="bookinfo.info" prop></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input  v-model="bookinfo.inventory" prop></el-input>
            </el-form-item>
            <el-form-item label="已借阅">
                <el-input  v-model="bookinfo.lentnum" prop></el-input>
            </el-form-item>
            <el-form-item >
                <el-button @click="updateBookInfo()" type="text" size="small">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            title="添加管理员信息"
            :visible.sync="bookinsertdialog"
            width="600px"
            :before-close="handleClose">
        <el-form  :rules='rules' label-width="100px" :model="bookinfo">
            <el-form-item label="书名">
                <el-input v-model="bookinfo.name"   prop></el-input>
            </el-form-item>
            <el-form-item label="isbn">
                <el-input v-model="bookinfo.isbn" prop></el-input>
            </el-form-item>
            <el-form-item label="封面">
                <el-upload
                        action="../upload"
                        name="file"
                        :on-success="upload"
                        :on-error="upload">
                    <el-input  v-model="bookinfo.caver" prop  placeholder="点击选择封面"></el-input>
                </el-upload>
            </el-form-item>
            <el-form-item label="价格">
                <el-input  v-model="bookinfo.price" prop></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input  v-model="bookinfo.author" prop></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-input  v-model="bookinfo.type" prop></el-input>
            </el-form-item>
            <el-form-item label="介绍">
                <el-input  v-model="bookinfo.info" prop></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input  v-model="bookinfo.inventory" prop></el-input>
            </el-form-item>
            <el-form-item label="已借阅">
                <el-input  v-model="bookinfo.lentnum" prop></el-input>
            </el-form-item>
            <el-form-item >
                <el-button @click="insertBookInfo()" type="text" size="small">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
<script>
    new Vue({
        el: '#booklist',
        data: {
            bookData: [{}],
            bookinfo: {},
            currentPage: 1,
            pagesize: 10,
            bookInfodialog: false,
            innerVisible:false,
            total: 0,
            restaurants: [],
            state: '',
            key:'',
            bookinfo: {
                name:'',
                isbn:'',
                caver:'',
                price:'',
                inventory:'',
                lentnum:'',
                type:'',
                info:'',
                author:''
            },
            search:'',
            rules:{
                name: { required: true, message: '请输入书名', trigger: 'blur' },
                isbn: { required: true, message: '请输入isbn', trigger: 'blur' },
                caver: { required: true, message: '请选择封面', trigger: 'blur' },
                price:{ required: true, message: '请输入价格', trigger: 'blur' },
                inventory:{ required: true, message: '请输入库存', trigger: 'blur' },
                lentnum:{ required: true, message: '请输入已借阅数量', trigger: 'blur' },
                type:{ required: true, message: '请输入书本类型', trigger: 'blur' },
                info:{ required: true, message: '请输入书包信息', trigger: 'blur' },
                author:{ required: true, message: '请输入作者', trigger: 'blur' },
            },
            bookupdatedialog:false,
            bookinsertdialog:false,
        }
        , created() {
           this.updatedate();

            api.post("/user/listname").then(res=>{
                console.log(res)
                let list = res.data.list;
                let date=[];
                list.forEach(item=>{
                    date.push({value:item.username,name:item.name})

                })
                console.log(date);
                this.restaurants=date;
            }).catch(res=>{
                console.log(res)
            })

        }
        , methods: {
            upload(response, file, fileList){
                if (response.state){
                    this.bookinfo.caver=response.filename;
                }else{
                    this.$message({
                        message:"上传失败",
                        type: 'error'
                    });
                }

                console.log(response, file, fileList);
            },
            insertBookInfo(){
                api.post("/book/insert",this.bookinfo).then(res=>{
                    if(res.state){
                        this.$message({
                            message:res.message,
                            type: 'success'
                        });
                        this.updatedate();
                        this.bookinsertdialog=false;
                    }else{
                        this.$message({
                            message:res.message,
                            type: 'error'
                        });
                    }
                }).catch(res=>{
                    console.log(res);
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });


                })
            },
            updateBookInfo(){
                api.post("/book/update",this.bookinfo).then(res=>{
                    if(res.state){
                        this.$message({
                            message:res.message,
                            type: 'success'
                        });
                        this.updatedate();
                        this.bookupdatedialog=false;
                    }else{
                        this.$message({
                            message:res.message,
                            type: 'error'
                        });
                    }
                }).catch(res=>{
                    console.log(res);
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });


                })
            },
            updatebook(res){
                this.bookinfo=JSON.parse(JSON.stringify(res));
                this.bookupdatedialog = true;
            },
            del(isbn){

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post("/book/delete",{isbn}).then(res=>{
                        if(res.state){
                            this.$message({
                                message:res.message,
                                type: 'success'
                            });
                            this.update();
                        }else{
                            this.$message({
                                message:res.message,
                                type: 'error'
                            });
                        }
                    }).catch(res=>{
                        console.log(res);
                        this.$message({
                            message: '服务器异常,稍后重试',
                            type: 'error'
                        });


                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })

            },
            borrowing(){
                console.log(this.state);
                this.bookInfodialog=false;
                this.innerVisible=false;
                api.post("/borrow/insert",{isbn:this.bookinfo.isbn,username:this.state}).then(res=>{
                    if(res.state){
                        this.$message({
                            message: '借书成功',
                            center: true,
                            showClose: true,
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '借书失败',
                            center: true,
                            showClose: true,
                            type: 'warning'
                        });
                    }
                }).catch(res=>{
                    this.$message({
                        message: '服务器异常',
                        center: true,
                        showClose: true,
                        type: 'error'
                    });
                })

            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${this.pagesize} 条`);
                this.updatedate()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${this.currentPage}`);
                this.updatedate()
            }, handleClick(res) {

                api.post("/book/findById", {isbn: res}).then(res => {

                    if (res.state) {
                        this.bookinfo = res.data;
                        this.bookInfodialog = true;
                    } else {
                        if (res.message == '用户未登录') {
                            sessionStorage.removeItem("user")
                            this.$confirm('用户未登录,是否跳转登录')
                                .then(_ => {
                                    parent.location.href = apiUrl + "/login.html"
                                })
                                .catch(_ => {
                                });
                        }
                    }

                }).catch(res => {
                    console.log("服务器错误", res)
                })


            }, handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },borrowbook(isbn){
                this.$confirm('确认借阅')
                    .then(_ => {
                        this.ookInfodialog=false;
                        api.post("/borrow/insert",{isbn}).then(res=>{
                            console.log(res);
                        }).catch(res=>{
                            console.log(res);
                        })
                    })
                    .catch(_ => {
                    });


            }, updatedate() {
                api.post("/book/list", {pageNum: this.currentPage, pageSize: this.pagesize,key:this.key}).then(res => {
                    // console.log(res);
                    if (res.state) {
                        this.bookData = res.data.list;
                        this.currentPage = res.data.pageNum;
                        this.total = res.data.total;
                        this.pagesize = res.data.pageSize;
                    } else {
                        this.$message({
                            message: '服务器异常,稍后重试',
                            type: 'error'
                        });
                    }


                }).catch(res => {
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });
                })
            }

        }
    })

</script>


</body>
</html>